<template>
    <template v-for="row in rows">
        <div class="row">
            <template v-for="col in row.cols">
                <div class="col-outside" style="display: inline-block;height: 100%;"
                    :style="`width:${(100 / row.spanSum * (col.data.span ?? 4))}%;`">
                    <div class="col-readonly col" v-if="col.data.option.readonly">{{ col.data.value }}</div>
                    <textarea v-else-if="col.data.option.type == 'textarea'" class="col none-scollbar"
                        @blur="updata(col.id)" style="width: 100%;height: auto;resize: none;"
                        :rows="col.data.others?.lines??4" v-model="col.data.value" :placeholder="col.data.option.placeholder"
                        :readonly="col.data.option.readonly"></textarea>
                    <template v-else-if="col.data.option.type == 'progress'">
                        <v-progress-linear :clickable="col.data.others?.clickable" class="col"
                            @update:model-value="(num) => { col.data.value = (num + (col.data.others?.min ?? 0)).toString(), updata(col.id) }"
                            height="24" :color="col.data.others?.colors?.[0]" :bg-color="col.data.others?.colors?.[1]"
                            :bg-opacity="1"
                            :model-value=" parseInt(col.data.value.toString()||'0') - (col.data.others?.min ?? 0)"
                            :max="((col.data.others?.max ?? 10) - (col.data.others?.min ?? 0))">
                            <span v-if="!col.data.others?.hideValue"
                                style="text-shadow: #eee 0.75px 0 0, #eee 0 0.75px 0, #eee -0.75px 0 0, #eee 0 -0.75px 0;">{{
                                    col.data.value ||'0'}}</span>
                        </v-progress-linear>

                    </template>
                    <template v-else-if="col.data.option.type == 'double_progress'">
                        <v-progress-linear class="col" height="12" :bg-opacity="1" :model-value="col.data.value || 0"
                            :color="col.data.others?.colors?.[0]" :bg-color="col.data.others?.colors?.[1]"
                            :max="col.data.others?.secondMax || 1"></v-progress-linear>
                        <v-progress-linear class="col" height="12" :bg-opacity="1"
                            :model-value="col.data.others?.max || 0" :color="col.data.others?.colors?.[2]"
                            :bg-color="col.data.others?.colors?.[3]"
                            :max="col.data.others?.secondMax || 1"></v-progress-linear>
                    </template>
                    <div class="col col-readonly" v-else-if="col.data.option.type == 'eunm'"
                        :style="`background-color:${col.data.others?.colors?.[(col.data.others.valueOption?.indexOf(col.data.value)) ?? 0]};`">
                        <span v-if="!col.data.others?.hideValue" style="color: #eee;">{{
                            col.data.value }}</span>
                        <v-menu location="end" activator="parent">
                            <v-btn rounded="0" v-for="item, index in col.data.others?.valueOption" density="compact"
                                :color="col.data.others?.colors?.[index]"
                                @click="() => { col.data.value = item; updata(col.id) }">
                                {{ item }}
                            </v-btn>
                        </v-menu>
                    </div>
                    <v-img v-else-if="col.data.option.type == 'image'" height="120px" lazy-src="/头像/loading.jpeg"
                        :src="`/头像/${col.data.value}`">
                        <template #error>
                            <v-img src="/头像/placeholder.jpeg">

                            </v-img>
                        </template>
                        <template #default>
                            <v-menu activator="parent" :close-on-content-click="false">
                                <input placeholder="图片全名带后缀" v-model="col.data.value" @blur="updata(col.id)"
                                    style="background-color: #eee;" type="text">
                            </v-menu>
                        </template>
                    </v-img>
                    <input v-else class="col" type="text" :placeholder="col.data.option.placeholder"
                        :readonly="col.data.option.readonly" v-model="col.data.value" @blur="updata(col.id)">
                </div>
            </template>
        </div>
    </template>
</template>

<script setup lang="ts">
import { useRoom } from "@/stores/room";
import card from "@/ts/cardData/card";
import bar, { barGetValue, barSetValue } from "@/ts/cardType/bar";
import { type colData } from "@/ts/cardType/col";
import { computed } from "vue";
const room = useRoom()

const props = defineProps<{
    id:string
    card:card
    bar: bar
    index: number[]
}>()
const bardata = computed(() => {
    return barGetValue(props.bar, props.card, [...props.index])
})


function updata(index: number) {
    let data = bardata.value[index].value
    let script = barSetValue(props.bar,index)
    if(script!=null){
    room.updateCardByScript(props.id,props.index,script,data,props.bar.keys)
    }
    
}
const rows = computed(() => {
    let rows: { cols: { data: colData, id: number }[], spanSum: number }[] = []
    let cols: { data: colData, id: number }[] = []
    let spanSum = 0
    for (let i = 0; i < bardata.value.length; i++) {
        let colSpan = bardata.value[i].span
        if (colSpan == undefined) colSpan = 4
        if (spanSum + colSpan <= 24) {
            spanSum += colSpan
            cols.push({ data: bardata.value[i], id: i })
        } else {
            rows.push({ cols: cols, spanSum: spanSum })
            spanSum = colSpan
            cols = [{ data: bardata.value[i], id: i }]
        }
    }
    if (cols.length != 0) rows.push({ cols: cols, spanSum: spanSum })
    return rows
})
</script>

<style scoped>
.col {
    border: 0;
    border-radius: 0;
    outline: 0;
    vertical-align: bottom;
    box-sizing: border-box;
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: rgba(0, 0, 0, 0);
    padding-left: 4px;
    padding-right: 4px;
    height: 1.5rem;
}


.col-readonly {
    text-align: center;
}

.none-scollbar {
    -ms-overflow-style: none;
    /* 适用于 Internet Explorer 和旧版 Edge */
    scrollbar-width: none;
    /* 适用于 Firefox */
}

.row {
    display: flex;
    justify-items: stretch;
}


.row:nth-child(even) {

    background-color: rgba(128, 128, 128, 0.3);
}

.row:nth-child(odd) {

    background-color: rgba(128, 128, 128, 0.15);
}

.col-outside:nth-child(odd) {

    background-color: rgba(128, 128, 128, 0.15);
}

.none-scollbar{
    scrollbar-width: none;
}
</style>